<template>
    <div class="login">
        <div class="login_box">
            <div class="way">
                <div>
                    快捷登录
                </div>
                <div>
                    普通登录
                </div>
            </div>
            <el-form ref="form" label-width="70px">
                <el-form-item label="账号">
                    <el-input class="input" v-model="form.account">

                    </el-input>
                </el-form-item>

                <el-form-item label="密码">
                    <el-input class="input" v-model="form.password">

                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button class="abc" type="primary" @click="onSubmit" >登录</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-button class="abc" type="primary" @click="register" >点击注册</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import qs from 'qs'
export default {
    data() {
        return {
            form: {
                account: '',
                password: '',
            }
        }
    },
    methods: {
        onSubmit() {
             let params=qs.stringify({
                account:this.form.account,
                password:this.form.password
            })
            this.axios.post('http://127.0.0.1:9090/user/login',params).then((result)=>{
                console.log(result.data)
                if(result.data=="账号密码正确"){
                    this.$router.replace('/user')
                }else{
                    alert(result.data)
                }
            }).catch((err)=>{

            })
        },
        register(){
            this.$router.replace('/register')
        }
    }
}
</script>
<style scoped>


.login {
    background-color: #2b4b6b;
    height: 100%;
}

.input{
    width: 85%;
    vertical-align:middle;

}

.login_box {
    padding: 10px;
    margin: 10px;
    width: 500px;
    height: 650px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

 .abc{
    width: 150px;
}
</style>